<template>
  <div id="user_main">

  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      userDataOption: ''
    }
  },
  methods: {
    async drawUserData() {
      this.userDataOption = ''
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      try {
        const {data: res} = await this.$http.get('/AEC/userData')
        let myChart = echarts.init(document.getElementById('user_main'))
        this.userDataOption = {
          legend: {},
          tooltip: {},
          dataset: {
            source: res.content
          },
          xAxis: {type: 'category'},
          yAxis: {},
          series: [
            {type: 'bar'},
            {type: 'bar'}
          ]
        };
        myChart.setOption(this.userDataOption);
      }
      catch (error){
        error.message;
      }
      loading.close()

    },
  },
  mounted() {
    this.drawUserData()
  }


}
</script>

<style>
#user_main {
  width: 100%;
  height: 93%;
  margin-top: 2%;


}

</style>